<template>
	<view class="count">
		<view class="">


			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">

				<view class="top f f-a-c f-j-b">
					<view class="left f f-a-c">
						<view class="defecate" @click="paibian(0)" :class="{active:ind==0}">
							排便
						</view>
						<view class="defecate" @click="paibian(1)" :class="{active:ind==1}">
							排尿
						</view>
					</view>
					<view class="right f f-a-c">
						<view @click="toTime" class="timeBox f f-a-c f-j-c">
							<image src="/static/rili.png" class="moreImg" mode=""></image>
							{{time}}
						</view>
						<view @click="goQing" class="analysis">
							情况分析
						</view>
					</view>
				</view>
				<view class="ring-chart">
					<view class="ci">
						单位:次
					</view>
					<l-echart class="l_echart" ref="ringChart"></l-echart>
				</view>
				<view class="bodyb">
					<view v-for="(item,index) in list" :key="index" class="box f">
						<view class="left f f-d-c f-a-c">
							<view class="times">
								<image src="/static/home/10.png" class="timesImg" mode="widthFix"></image>
							</view>
							<view class="leftXian"></view>
						</view>
						<view class="right">
							<view class="topTime f f-a-c f-j-b">
								<view class="time">
									{{$u.timeFormat(item.recorded_time, 'mm-dd hh:MM')}}
								</view>
								<image src="/static/home/Frame.png" @click="youDian(item)" class="gengduo" mode="">
								</image>
							</view>
							<view class="botBox ">
								<view class="contentNei">
									{{item.content}}
								</view>
								<div v-if="item.images.length" class=" f f-w-w">
									<view v-for="(ite,inde) in String(item.images).split(',')" @click="previewImg(ite)"
										:key="inde" class="imgs">
										<image :src="ite" class="imgImg b-r-20" mode="aspectFill">
										</image>
									</view>
								</div>
								<view class="xian">

								</view>
								<view v-if="item.type==1||item.type==3" class="boxDefecation f f-a-c f-j-b">
									<view class="defecation">
										排便情况
									</view>
									<view class="zongse">
										{{item.defecation.shape==1?'水状':item.defecation.shape==2?'稀状':item.defecation.shape==3?'泥状':item.defecation.shape==4?'软圆条状':item.defecation.shape==5?'木桩状':item.defecation.shape==6?'节节状':'圆球粒状'}}、
										{{item.defecation.color==1?'棕色':item.defecation.color==2?'焦黑色':item.defecation.color==3?'黑色':item.defecation.color==4?'红色':item.defecation.color==5?'绿色':'灰白色'}}
									</view>
								</view>
								<view v-if="item.type==2||item.type==3" class="boxDefecation f f-a-c f-j-b">
									<view class="defecation">
										排尿情况
									</view>
									<view class="zongse">
										{{item.micturition.size==1?'水滴':item.micturition.size==2?'棒棒糖':item.micturition.size==3?'乒乓球':item.micturition.size==4?'网球':'拳头'}}、
										{{item.micturition.color==1?'黄色':item.micturition.color==2?'深黄色':item.micturition.color==3?'红色':item.micturition.color==4?'棕色':item.micturition.color==5?'绿色':item.micturition.color==6?'透明':'乳白色'}}、
										{{item.micturition.appearance==1?'清澈':'浑浊'}}
									</view>
								</view>
							</view>
							<view class="bai"></view>
						</view>
					</view>
				</view>
				<view @click="goJi" class="TakeNoteOf f f-a-c f-j-c">
					<image src="/static/home/Frame12.png" class="bijiImg" mode=""></image>
					<view class="name">
						记录
					</view>
				</view>
				<u-picker @confirm="confirmFn" mode="time" :params="params" :default-time="defaultTime"
					v-model="shows"></u-picker>
			</scroll-view>
			<u-popup mode="bottom" border-radius="30" v-model="show">
				<view class="editl">
					<view @click="bianji" class="topLeft">
						编辑
					</view>
					<view @click="detil" class="topLeft">
						删除
					</view>
					<view @click="show=false" class="quxiao">
						取消
					</view>
				</view>
			</u-popup>
			<u-modal v-model="showShoop" @confirm="confirmFns" :show-cancel-button="true" content="确认要删除吗？"></u-modal>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		data() {
			return {
				showShoop: false,
				shows: false,
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// list: ['', ''],
				defaultTime: '2023-01',
				datesArray: [],
				datesArrays: [],
				ind: 0,
				list: [],
				time: '请选择',
				item: {},
				year: '',
				page: 1,
				total: 0,
				dataList: [],
				timeList: [],
				listss: []
			}
		},
		onReachBottom() {
			this.show = false
			this.page = 1
			this.list = []
			// 获取时间
			this.initTime()
			// 请求柱状图数据
			this.initLiu()
			this.initList()
			setTimeout(() => {
				// 渲染柱状图
				this.loadRingData()
			}, 1000)
		},
		onShow() {
			this.show = false
			this.page = 1
			this.list = []
			// 获取时间
			this.initTime()
			// 请求柱状图数据
			this.initLiu()
			this.initList()
			setTimeout(() => {
				// 渲染柱状图
				this.loadRingData()
			}, 1000)
		},
		methods: {
			previewImg(imgurl) {
				uni.previewImage({
					current: imgurl,
					urls: [imgurl]
				});
			},
			previewImg(imgurl) {
				uni.previewImage({
					current: imgurl,
					urls: [imgurl]
				});
			},
			async confirmFns() {
				let n = await this.$api.excretionsJotter({
					id: this.item.id
				})
				this.$msg(n.msg)
				this.showShoop = false
				if (n.code == 200) {
					setTimeout(() => {
						this.show = false
						this.list = []
						this.page = 1
						this.initList()
					}, 1000)
				}
			},
			// 点击编辑
			bianji() {
				let m = []
				let n = this.item.images.split(',')
				if (this.item.images) {
					m = n.map(item => {
						return {
							url: item
						}
					})
				}
				uni.navigateTo({
					url: `/pages/home/RecordsNiao?fileList=${JSON.stringify(m)}&type=${this.item.type}&pets=${JSON.stringify(this.item.pets)}&defecation=${JSON.stringify(this.item.defecation)}&micturition=${JSON.stringify(this.item.micturition)}&content=${this.item.content}&recorded_time=${this.item.recorded_time}&num=2&id=` +
						this.item.id
				})
			},
			// 点击删除
			async detil() {
				this.showShoop = true

			},
			onreachBottom() {
				if (this.list.length < this.total) {
					this.page++
					this.initList()
				}
			},
			async initList() {
				let n = await this.$api.excretionsList({
					page: this.page
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.rows]
			},
			initTime() {
				let date = new Date()
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const data = date.getDate(); //天
				let hours = date.getHours(); // 获取小时数
				let minutes = date.getMinutes(); // 获取分钟数
				this.year = year
				this.defaultTime = year + '-' + (month < 0 ? '0' + month : month) + '-' + (data < 0 ? '0' + data : data)
				this.confirmFn({
					year: String(year),
					month: month < 0 ? '0' + String(month) : String(month),
					day: data < 0 ? '0' + String(data) : String(data)
				})
			},
			youDian(item) {
				this.show = true
				this.item = item
			},
			async initLiu() {
				let n = await this.$api.statistical({
					type: this.ind + 1,
					start_time: this.$u.timeFormat(this.datesArray[0], 'yyyy-mm-dd'),
					end_time: this.$u.timeFormat(this.datesArray[this.datesArray.length - 1], 'yyyy-mm-dd')
				}, uni.getStorageSync('catId'))
				this.listss = n.data.records
			},
			goJi() {
				uni.navigateTo({
					url: '/pages/home/RecordsNiao'
				})
			},
			toTime() {
				this.shows = true
			},
			confirmFn(e) {
				console.log(e, '这是e');
				console.log(e, '111111111');
				this.time = e.month + '-' + e.day
				if (e.month < 10) {
					e.month = '0' + e.month
				}
				if (e.day < 10) {
					e.day = '0' + e.day
				}
				let n = e.year + '-' + e.month + '-' + e.day
				let selectedDate = +new Date(n);
				console.log(+new Date('2024-2-18'), +new Date('2024-02-18'), +new Date(n), n, e.year, e.month, e.day,
					'99999999999999999999999');
				let datesArray = [];
				let datesArrays = [];
				// 获取前三天的日期
				for (let i = 3; i > 0; i--) {
					let previousDate = new Date(selectedDate);
					// let previousDate = selectedDate;
					previousDate.setDate(previousDate.getDate() - i);
					datesArray.push(+previousDate);
				}
				// 将选择的日期加入数组
				datesArray.push(+selectedDate);
				// 获取后三天的日期
				for (let i = 1; i <= 3; i++) {
					let nextDate = new Date(selectedDate);
					nextDate.setDate(nextDate.getDate() + i);
					datesArray.push(+nextDate);
				}
				// 打印结果

				datesArray.forEach(item => {
					let m = new Date(item)
					const year = m.getFullYear();
					const month = m.getMonth() + 1;
					const data = m.getDate(); //天
					datesArrays.push(month + '.' + data)
				})
				console.log(datesArray, datesArrays, '5555555555');
				this.datesArray = datesArray
				this.datesArrays = datesArrays
				this.time = datesArrays[0] + '-' + datesArrays[6]

				this.initLiu()
			},
			// 尿便分析------------------------------------------------------------------------------------------------------------------------
			goQing() {
				let obj = {
					bianColor: this.list[0].defecation.color == 1 ? '0' : this.list[0].defecation.color == 2 ? '1' :
						this.list[0].defecation
						.color == 3 ? '2' : this.list[0].defecation.color == 4 ? '3' : this.list[0].defecation
						.color == 5 ? '4' : '5',
					bianXing: this.list[0].defecation.shape == 1 ? '0' : this.list[0].defecation.shape == 2 ? '1' :
						this.list[0].defecation.shape == 3 ? '2' : this.list[0].defecation.shape == 4 ? '3' : this
						.list[0].defecation.shape == 5 ? '4' : this.list[0].defecation.shape == 6 ? '5' : '6',
					acts: this.list[0].defecation.color == 1 ? '棕色' : this.list[0].defecation.color == 2 ? '焦黑色' : this
						.list[0].defecation
						.color == 3 ? '黑色' : this.list[0].defecation.color == 4 ? '红色' : this.list[0].defecation
						.color == 5 ? '绿色' : '灰白色',
					act: this.list[0].defecation.shape == 1 ? '水状' : this.list[0].defecation.shape == 2 ? '稀状' : this
						.list[0].defecation.shape == 3 ? '泥状' : this.list[0].defecation.shape == 4 ? '软圆条状' : this
						.list[0].defecation.shape == 5 ? '木桩状' : this.list[0].defecation.shape == 6 ? '节节状' : '圆球颗粒',
					niaoBigTit: this.list[0].micturition.size == 1 ? '水滴' : this.list[0].micturition.size == 2 ?
						'棒棒糖' : this.list[0].micturition.size == 3 ? '乒乓球' : this.list[0].micturition.size == 4 ?
						'网球' : '拳头',
					niaoColor: this.list[0].micturition.color == 1 ? '黄色' : this.list[0].micturition.color == 2 ?
						'深黄色' : this.list[0].micturition.color == 3 ? '红色' : this.list[0].micturition.color == 4 ?
						'棕色' : this
						.list[0].micturition.color == 5 ? '绿色' : this.list[0].micturition.color == 6 ? '透明' : '乳白色',
					niaoWai: this.list[0].micturition.appearance == 1 ? '清澈' : '浑浊'
				}
				uni.navigateTo({
					url: '/pages/home/UrineAndStoolAnalysis?num=2&obj=' + JSON.stringify(obj)
				})
			},
			// 这个是切换
			paibian(num) {
				this.ind = num
				this.initLiu()
				setTimeout(() => {
					// 渲染柱状图
					this.loadRingData()
				}, 1000)
			},
			async loadRingData() {
				this.dataList = []
				this.timeList = []
				this.listss.forEach(item => {
					this.dataList.push(item.num)
				})
				this.listss.forEach(item => {
					this.timeList.push(this.$u.timeFormat(+new Date(item.date), 'mm/dd'))
				})
				await this.$nextTick()
				this.$refs.ringChart.init(echarts, chart => {
					chart.setOption({
						xAxis: {
							type: 'category',
							// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							data: this.timeList,
							axisTick: {
								show: false
							}
						},
						yAxis: {
							type: 'value',
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed' //背景色为虚线
								}
							}

						},
						series: [{
							// data: [120, 200, 150, 80, 70, 110, 130],
							data: this.dataList,
							type: 'bar',
							barWidth: 30, // 设置每个柱子的宽度为40
							itemStyle: {
								color: '#977961'

							}
						}]
					});

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topLeft {
		width: 100%;
		height: 108rpx;
		line-height: 108rpx;
		border-bottom: 2rpx solid #f3f1ee;
		text-align: center;
		color: $hei;
		font-size: 28rpx;
		font-weight: 600;
	}

	.quxiao {
		width: 100%;
		height: 138rpx;
		line-height: 108rpx;
		text-align: center;
		color: $hui;
		font-size: 28rpx;
		font-weight: 600;
	}

	.l_echart {
		padding: 0;
	}

	.TakeNoteOf {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 272rpx;
		height: 88rpx;
		background: $brown;
		border-radius: 44rpx;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(151, 121, 97, 0.20);

		.bijiImg {
			width: 34rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}

		.name {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: LEFT;
			color: $bai;
		}
	}

	.bodyb {
		padding-bottom: 100rpx;
		margin-top: 60rpx;
	}

	.box {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 20rpx;

		.left {
			margin-right: 25rpx;
			margin-top: 8rpx;

			.times {
				width: 32rpx;
				height: 32rpx !important;
				margin-bottom: 20rpx;

				.timesImg {
					width: 100%;
					height: 100%;
				}
			}

			.leftXian {
				width: 0rpx;
				height: 100%;
				border: 4rpx dashed $f1eeeb;
			}
		}

		.right {
			width: 90%;

			.bai {
				height: 50rpx;
				width: 100%;
			}

			.botBox {
				width: 100%;
				padding: 30rpx;
				background-color: $f7f6f2;
				margin-top: 16rpx;
				border-radius: 24rpx;

				.boxDefecation {
					margin-top: 30rpx;

					.defecation {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $hei;
					}

					.zongse {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $brown;
					}
				}

				.xian {
					width: 100%;
					height: 0rpx;
					border: 1rpx dashed #ebe2da;
					margin: 24rpx 0;
				}

				.imgs {
					width: 144rpx;
					height: 144rpx;
					margin-top: 16rpx;
					border-radius: 16rpx;
					margin-right: 10rpx;
					// margin-bottom: 10rpx;

					.imgImg {
						width: 100%;
						height: 100%;
						// object-fit: cover;
					}


				}

				.contentNei {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;

					word-wrap: break-word;
					color: $hei;
					margin-top: 15rpx;
				}

				.topAva {

					.avatav {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}

					.name {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $hei;
						margin-left: 20rpx;
					}
				}
			}

			.topTime {
				font-size: 32rpx;
				font-family: 'HarmonyOS Sans Bold';
				font-weight: 700;
				text-align: LEFT;
				color: #2f2319;
			}

			.gengduo {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.ring-chart {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		border: 1rpx solid #f1eeeb;
		border-radius: 24rpx;
		box-shadow: 0rpx 12rpx 64rpx 0rpx rgba(151, 121, 97, 0.07);
		margin-top: 30rpx;
		padding: 0 20rpx;

		.ci {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: $hui;
			// padding-left: 20rpx;
			padding-top: 20rpx;
		}
	}

	.top {
		width: 90%;
		margin: 0 auto;

		.right {
			.analysis {
				width: 144rpx;
				height: 64rpx;
				line-height: 64rpx;
				border: 1rpx solid $brown;
				border-radius: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: center;
				color: $brown;
				margin-left: 20rpx;
			}

			.timeBox {
				width: 204rpx;
				height: 64rpx;
				border: 1rpx solid #ebe2da;
				border-radius: 33rpx;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: center;
				color: $hei;

				.moreImg {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.left {

			.defecate {
				width: 112rpx;
				height: 64rpx;
				line-height: 64rpx;
				border: 1rpx solid #ebe2da;
				border-radius: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				text-align: center;
				color: $hei;
				margin-right: 20rpx;
			}
		}
	}

	.active {
		border: none;
		background-color: #f4efea;
		color: $brown !important;
	}

	.count {
		overflow-y: auto;
		height: 100vh;
		width: 100%;
		background-color: #fffefc;
	}
</style>